<template>
    <div class="loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</template>

<script>
    export default {
        name: "Loading"
    }
</script>

<style scoped>
    .loading {
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .loading span {
        width: 6px;
        height: 40px;
        margin: 0 2px;
        border-radius: 5px;
        background-color: #35d4cb;
        animation: loading 1s ease infinite;
    }

    @keyframes loading {
        0%, 100% {
            transform: scaleY(1.5);
            background-color: #35d4cb;
        }
        50%{
            transform: scaleY(1);
            background-color: #90eecd;
        }
    }
    .loading span:nth-child(2){
        animation-delay: 0.2s;
    }
    .loading span:nth-child(3){
        animation-delay: 0.4s;
    }
    .loading span:nth-child(4){
        animation-delay: 0.6s;
    }
    .loading span:nth-child(5){
        animation-delay: 0.8s;
    }
</style>
